<template>
  <div class="container">
    <div class="music" @click="clickMusic" :class="{'bor':isplay}">
      <img src="http://assets.rurushishi.com/activies/gzld/music.png" alt>
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
export default {
  components: {},
  props: {},
  data() {
    return {
      isplay: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 点击音乐开关
    clickMusic() {
      let that = this;
      if (that.isplay) {
        window.ConfigAudio.pause();
        that.isplay = false;
      } else {
        window.ConfigAudio.play();
        that.isplay = true;
      }
    },
     // 初始化背景音乐
    initBgm() {
      let that = this;
      if (!window.ConfigAudio) {
        window.ConfigAudio = new Audio();
        window.ConfigAudio.src =
          "http://assets.rurushishi.com/activies/zdfzh/music2.mp3";
        wx.ready(function() {
          window.ConfigAudio.play();
          that.isplay = true;
        });
      } else {
        if (window.ConfigAudio.paused) {
          that.isplay = false;
        } else {
          that.isplay = true;
        }
      }
    },
  },
  created() {
    this.initBgm();
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.music {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1rem;
  height: 1rem;
}

.music > img {
  width: 100%;
  height: 100%;
}

.music.bor {
  animation: Rotate 1s infinite linear;
}

@keyframes Rotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}
</style>